<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <!--	<script type="text/javascript" src="http://www.lovejavascript.com/js/jquery-2.1.4.min.js"></script>-->
    <script type="text/javascript" th:src="@{/js/jquery-2.1.4.min.js}" ></script>
    <link rel="stylesheet" type="text/css" th:href="@{/css/GridManager.css}">
    <script type="text/javascript" th:src="@{/js/GridManager.js}" ></script>
    <title>GridManager:jquery环境下渲染</title>
    <style>

        html, body{
            width: 100%;
            height: 100%;
            overflow-x:hidden;
            margin: 0px;
            padding: 0px;
        }
    </style>
</head>

<body>

<div class="search-area">
    <div class="sa-ele">
        <label class="se-title">角色名称:</label>
        <input class="se-con" name="roleName"/>
        <label class="se-title">父级角色id:</label>
        <input class="se-con" name="parentRoleId"/>
    </div>
    <div class="sa-ele">
        <button class="add-action">新增</button>
        <button class="search-action">搜索</button>
        <button class="reset-action">重置</button>
    </div>
</div>
<br/>
<div class="dialog-demo">
    <table grid-manager="demoOne"></table>
</div>
<script type="text/javascript" >
    function remove(id){
        if(confirm("确定删除该角色?")){
            var data = {
                "id" : id
            }
            $.ajax({
                url: "/role/remove",
                type: "POST",
                contentType: 'application/json', // 设置Content Type为JSON
                data: JSON.stringify(data), // 将参数对象转换成JSON字符串并传递
                success: function (response) {
                    console.log("请求成功");
                    console.log(response); // 处理返回结果
                    $('table').GM('setQuery', null, function(){
                        console.log('刷新执行成功');
                    });
                },
                error: function () {
                    console.error("请求失败");
                }
            });
        }
    }
    // 绑定新增事件
    document.querySelector('.add-action').addEventListener('click', function () {
        var data = {
            roleName: document.querySelector('[name="roleName"]').value,
            parentRoleId: document.querySelector('[name="parentRoleId"]').value
        };
        $.ajax({
            url: "/role/add",
            type: "POST",
            contentType: 'application/json', // 设置Content Type为JSON
            data: JSON.stringify(data), // 将参数对象转换成JSON字符串并传递
            success: function (response) {
                console.log("请求成功");
                console.log(response); // 处理返回结果
                $('table').GM('setQuery', null, function(){
                    console.log('刷新执行成功');
                });
            },
            error: function () {
                console.error("请求失败");
            }
        });
    });

    // 绑定搜索事件
    document.querySelector('.search-action').addEventListener('click', function () {
        var _query = {
        };
        $('table').GM('setQuery', _query, function(){
        });
    });

    // 绑定重置
    document.querySelector('.reset-action').addEventListener('click', function () {
        document.querySelector('[name="roleName"]').value= '';
        document.querySelector('[name="parentRoleId"]').value= '';
    });

    $('table').GM({
        supportRemind: false,
        gridManagerName: 'test',
//			,disableCache:true,
        height: '400px',
        supportAjaxPage:true,
        supportSorting: true,
        ajax_url: '/role/list',
        ajax_type: 'POST',
        // ajax_headers: {'Content-Type':'application/json'},
        query: {},
        pageSize:20,
        columnData: [
            {key: 'action', remind: 'the action', text: '操作', width: '150px', template: function(action, rowObject){
                    return '<button class="plugin-action del-action" onclick="remove(\''+rowObject.id+'\')">删除</button>';
                }},
            {key: 'id', text: '角色id', sorting: 'DESC', width: '100px'},
            {key: 'roleName', text: '角色名称'},
            {key: 'parentRoleId', text: '父级角色id'}
        ],
        // 分页前事件
        pagingBefore: function(query){
            console.log('pagingBefore', query);
        },
        // 分页后事件
        pagingAfter: function(data){
            console.log('pagingAfter', data);
        },
        // 排序前事件
        sortingBefore: function (data) {
            console.log('sortBefore', data);
        },
        // 排序后事件
        sortingAfter: function (data) {
            console.log('sortAfter', data);
        },
        // 宽度调整前事件
        adjustBefore: function (event) {
            console.log('adjustBefore', event);
        },
        // 宽度调整后事件
        adjustAfter: function (event) {
            console.log('adjustAfter', event);
        },
        // 拖拽前事件
        dragBefore: function (event) {
            console.log('dragBefore', event);
        },
        // 拖拽后事件
        dragAfter: function (event) {
            console.log('dragAfter', event);
        }
    });


</script>
</body>
</html>
